<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>05 vue表单控件绑定</title>
    </head>
    <body>
        <div id="app">
            <p>
                <input type="text" v-model="myText" />
                <br />
                <textarea cols="50" rows="5" v-model="myText"></textarea>
                <br />
                {{ myText }}
            </p>
            <p>
                <input type="checkbox" v-model="isChecked" />
                记住用户名密码
            </p>
            <p>
                请选择你的爱好：
                <input type="checkbox" name="aihao" value="游泳" v-model="aihaoArr" />
                游泳
                <input type="checkbox" name="aihao" value="跑步" v-model="aihaoArr" />
                跑步
                <input type="checkbox" name="aihao" value="游戏" v-model="aihaoArr" />
                游戏
                <br />
                {{ aihaoArr }}
            </p>
            <p>
                请选择性别：
                <input type="radio" name="sex" value="男" v-model="sex" />
                男
                <input type="radio" name="sex" value="女" v-model="sex" />
                女
                <br />
                {{ sex }}
            </p>
            <p>
                <input type="text" v-model.lazy="lazyText" />
                {{ lazyText }}
                <br />
                <input type="text" v-model.number="myNum" />
                {{ myNum }}
                <br />
                <input type="text" v-model.trim="trimText" />
                |{{ trimText }}|
            </p>
        </div>

        <script>
            const vm = new Vue({
                el: '#app',
                data() {
                    return {
                        myText: '',
                        isChecked: false,
                        aihaoArr: [],
                        sex: '',
                        lazyText: '',
                        myNum: 0,
                        trimText: ''
                    };
                }
            });
        </script>
    </body>
</html>
